<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const navbar = ref(null);

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

const handleScroll = () => {
  if (navbar.value) {
    if (window.scrollY > 100) {
      navbar.value.style.background = 'rgba(26, 32, 44, 0.98)';
      navbar.value.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.2)';
    } else {
      navbar.value.style.background = 'rgba(45, 55, 72, 0.95)';
      navbar.value.style.boxShadow = 'none';
    }
  }
};

const scrollToSection = (sectionId) => {
  // 如果不在首页，则先导航到首页
  if (route.path !== '/') {
    router.push('/').then(() => {
      // 导航完成后滚动到目标区域
      setTimeout(() => {
        const section = document.getElementById(sectionId);
        if (section) {
          // 作用：将目标元素滚动到可视区域
          // 使用方式：section.scrollIntoView(options)
          // options参数说明：
          // - behavior: 'smooth' 表示平滑滚动（有动画效果），'auto' 表示 instant滚动（无动画）
          // - block: 'start' 表示将元素顶部与视口顶部对齐，'center' 居中对齐，'end' 底部对齐
          section.scrollIntoView({ behavior: 'smooth', block: 'end' });
        }
      }, 100); // 短暂延迟确保DOM已更新
    });
  } else {
    // 已经在首页，直接滚动到目标区域
    const section = document.getElementById(sectionId);
    if (section) {
      section.scrollIntoView({ behavior: 'smooth', block: 'end' });
    }
  }
};
</script>

<template>
  <nav ref="navbar" class="navbar">
    <div class="nav-container">
      <div class="nav-logo">
        <img src="https://www.yysls.cn/pc/gw/20220815175950/img/logo2_97a4294.png" alt="logo2" />
        <h2>夕阳红再就业</h2>
      </div>
      <ul class="nav-menu">
        <li><router-link to="/" class="nav-link" @click.prevent="scrollToSection('hero')">首页</router-link></li>
        <li><router-link to="/" class="nav-link" @click.prevent="scrollToSection('DemoVideos')">百业混剪</router-link></li>
        <li><router-link to="/" class="nav-link" @click.prevent="scrollToSection('organizations')">百业活动</router-link></li>
        <li><router-link to="/" class="nav-link" @click.prevent="scrollToSection('characters')">百业人员</router-link></li>
        <li><router-link to="/" class="nav-link" @click.prevent="scrollToSection('footer')">加入我们</router-link></li>
        <!-- <li><router-link to="/strategy" class="nav-link">百业攻略</router-link></li> -->
      </ul>
    </div>
  </nav>
</template>

<style scoped>
.navbar {
  position: fixed;
  top: 0;
  width: 100vw;
  min-width: 1920px;
  background: rgba(45, 55, 72, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  transition: all 0.3s ease;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.nav-container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-logo h2 {
  color: #F7FAFC;
  font-size: 1.8rem;
  font-weight: 600;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 30px;
}

.nav-link {
  color: #E2E8F0;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  padding: 8px 0;
}

.nav-link:hover {
  color: #F7FAFC;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #F7FAFC, #E2E8F0);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}
</style>